<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>招聘列表 - 社交招聘平台</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    body {
      background-color: #f5f5f5;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      padding-bottom: 70px;
    }
    
    /* 顶部导航 */
    .top-nav {
      background-color: white;
      padding: 12px 15px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
      position: sticky;
      top: 0;
      z-index: 100;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      text-align: center;
      margin: 0;
    }
    
    /* 搜索与筛选区 */
    .search-bar {
      padding: 10px 15px;
      background-color: white;
    }
    
    .search-container {
      position: relative;
    }
    
    .search-input {
      width: 100%;
      padding: 10px 15px 10px 40px;
      border-radius: 20px;
      border: 1px solid #eee;
      background-color: #f9f9f9;
      font-size: 14px;
    }
    
    .search-input:focus {
      outline: none;
      border-color: #0d6efd;
      background-color: white;
    }
    
    .search-icon {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      color: #999;
    }
    
    .filter-bar {
      display: flex;
      padding: 8px 15px;
      background-color: white;
      border-top: 1px solid #eee;
      overflow-x: auto;
      gap: 10px;
    }
    
    .filter-item {
      white-space: nowrap;
      padding: 5px 12px;
      border-radius: 15px;
      font-size: 14px;
      background-color: #f5f5f5;
      color: #333;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 5px;
    }
    
    .filter-item.active {
      background-color: #0d6efd;
      color: white;
    }
    
    /* 筛选面板 */
    .filter-panel {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0,0,0,0.5);
      z-index: 1000;
      display: none;
    }
    
    .filter-panel.active {
      display: block;
    }
    
    .panel-content {
      background-color: white;
      height: 85%;
      border-radius: 16px 16px 0 0;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      overflow-y: auto;
    }
    
    .panel-header {
      padding: 15px;
      border-bottom: 1px solid #eee;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .panel-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    
    .panel-close {
      background: transparent;
      border: none;
      font-size: 20px;
      color: #999;
    }
    
    .filter-options {
      padding: 15px;
    }
    
    .option-group {
      margin-bottom: 25px;
    }
    
    .option-group-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 12px;
      color: #333;
    }
    
    .option-items {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    
    .option-item {
      padding: 6px 14px;
      border-radius: 15px;
      font-size: 14px;
      border: 1px solid #ddd;
      color: #555;
      background-color: white;
    }
    
    .option-item.active {
      border-color: #0d6efd;
      color: #0d6efd;
      background-color: #f0f7ff;
    }
    
    .panel-actions {
      padding: 15px;
      border-top: 1px solid #eee;
      display: flex;
      gap: 10px;
      position: sticky;
      bottom: 0;
      background-color: white;
    }
    
    .panel-action-btn {
      flex: 1;
      padding: 10px;
      border-radius: 8px;
      font-size: 16px;
    }
    
    /* 招聘列表 */
    .job-list {
      margin-top: 10px;
    }
    
    .job-item {
      background-color: white;
      margin-bottom: 10px;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    
    /* 招聘信息头部 */
    .job-header {
      padding: 15px;
      display: flex;
      gap: 12px;
    }
    
    .company-logo {
      width: 60px;
      height: 60px;
      border-radius: 8px;
      object-fit: cover;
      flex-shrink: 0;
      background-color: #f5f5f5;
    }
    
    .no-logo {
      width: 60px;
      height: 60px;
      border-radius: 8px;
      background-color: #f5f5f5;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #999;
      font-size: 24px;
      flex-shrink: 0;
    }
    
    .job-info {
      flex: 1;
    }
    
    .job-title {
      font-size: 17px;
      font-weight: 600;
      color: #333;
      margin-bottom: 5px;
      line-height: 1.3;
    }
    
    .company-name {
      font-size: 14px;
      color: #666;
      margin-bottom: 3px;
    }
    
    .job-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }
    
    .job-tag {
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 12px;
      background-color: #f0f7ff;
      color: #0d6efd;
    }
    
    .job-tag.salary {
      background-color: #fff0f0;
      color: #dc3545;
    }
    
    /* 图片展示区 - 多种样式 */
    .images-container {
      padding: 0 15px 10px;
    }
    
    /* 无图样式 */
    .no-images {
      display: none; /* 招聘信息无图时不显示占位 */
    }
    
    /* 单图样式 */
    .single-image {
      width: 100%;
      border-radius: 8px;
      overflow: hidden;
    }
    
    .single-image img {
      width: 100%;
      height: 180px;
      object-fit: cover;
    }
    
    /* 多图样式 */
    .multiple-images {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 5px;
    }
    
    .multi-image-item {
      aspect-ratio: 1;
      border-radius: 8px;
      overflow: hidden;
      position: relative;
    }
    
    .multi-image-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .image-count {
      position: absolute;
      bottom: 5px;
      right: 5px;
      background-color: rgba(0,0,0,0.6);
      color: white;
      font-size: 12px;
      padding: 2px 5px;
      border-radius: 4px;
    }
    
    /* 职位详情 */
    .job-details {
      padding: 0 15px 15px;
    }
    
    .job-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 10px;
      font-size: 13px;
      color: #666;
    }
    
    .meta-item {
      display: flex;
      align-items: center;
      gap: 5px;
    }
    
    .meta-item i {
      color: #999;
      font-size: 14px;
    }
    
    .job-desc {
      font-size: 14px;
      color: #555;
      line-height: 1.5;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      margin-bottom: 10px;
    }
    
    /* 底部操作栏 */
    .job-actions {
      display: flex;
      justify-content: space-between;
      padding: 10px 15px;
      border-top: 1px solid #eee;
    }
    
    .action-btn {
      padding: 6px 12px;
      border-radius: 6px;
      font-size: 14px;
    }
    
    /* 底部导航 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: white;
      border-top: 1px solid #eee;
      display: flex;
      padding: 8px 0;
      z-index: 100;
    }
    
    .nav-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #999;
      font-size: 10px;
    }
    
    .nav-item.active {
      color: #0d6efd;
    }
    
    .nav-icon {
      font-size: 20px;
      margin-bottom: 3px;
    }
    
    /* 已选筛选项 */
    .selected-filters {
      padding: 8px 15px;
      background-color: white;
      border-top: 1px solid #eee;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    
    .filter-tag {
      padding: 3px 10px;
      background-color: #f0f7ff;
      color: #0d6efd;
      border-radius: 15px;
      font-size: 13px;
      display: flex;
      align-items: center;
      gap: 5px;
    }
    
    .tag-remove {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background-color: rgba(13,110,253,0.1);
      color: #0d6efd;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
    }
  </style>
</head>
<body>
  <!-- 顶部导航 -->
  <div class="top-nav d-flex justify-content-between align-items-center">
    <button class="btn btn-link p-0 text-dark">
      <i class="fa fa-bars"></i>
    </button>
    <h1 class="nav-title">招聘信息</h1>
    <button class="btn btn-link p-0 text-dark">
      <i class="fa fa-star-o"></i>
    </button>
  </div>
  
  <!-- 搜索区 -->
  <div class="search-bar">
    <div class="search-container">
      <i class="fa fa-search search-icon"></i>
      <input type="text" class="search-input" placeholder="搜索职位、公司或关键词...">
    </div>
  </div>
  
  <!-- 筛选栏 -->
  <div class="filter-bar">
    <div class="filter-item active">
      <i class="fa fa-th-large"></i> 全部
    </div>
    <div class="filter-item" data-panel="job-type">
      <i class="fa fa-briefcase"></i> 职位类型
    </div>
    <div class="filter-item" data-panel="salary">
      <i class="fa fa-money"></i> 薪资
    </div>
    <div class="filter-item" data-panel="experience">
      <i class="fa fa-line-chart"></i> 经验
    </div>
    <div class="filter-item" data-panel="education">
      <i class="fa fa-graduation-cap"></i> 学历
    </div>
    <div class="filter-item" data-panel="location">
      <i class="fa fa-map-marker"></i> 地区
    </div>
  </div>
  
  <!-- 已选筛选项 -->
  <div class="selected-filters">
    <div class="filter-tag">
      全职 <span class="tag-remove">×</span>
    </div>
    <div class="filter-tag">
      10k-20k <span class="tag-remove">×</span>
    </div>
    <div class="filter-tag">
      北京 <span class="tag-remove">×</span>
    </div>
    <button class="btn btn-link p-0 text-sm text-gray-500">
      清除全部
    </button>
  </div>
  
  <!-- 招聘列表 -->
  <div class="job-list">
    <!-- 1. 无图片招聘 -->
    <div class="job-item">
      <div class="job-header">
        <img src="https://picsum.photos/200/200?random=1" class="company-logo" alt="公司logo">
        <div class="job-info">
          <div class="job-title">高级前端开发工程师</div>
          <div class="company-name">科技有限公司 · 互联网</div>
          <div class="job-tags">
            <span class="job-tag salary">15k-25k·13薪</span>
            <span class="job-tag">全职</span>
            <span class="job-tag">3-5年</span>
            <span class="job-tag">本科</span>
          </div>
        </div>
      </div>
      
      <!-- 无图片 -->
      <div class="images-container">
        <div class="no-images">
          <i class="fa fa-picture-o"></i>
        </div>
      </div>
      
      <div class="job-details">
        <div class="job-meta">
          <div class="meta-item"><i class="fa fa-map-marker"></i> 北京市朝阳区</div>
          <div class="meta-item"><i class="fa fa-subway"></i> 距地铁10号线500米</div>
          <div class="meta-item"><i class="fa fa-clock-o"></i> 发布于 今天</div>
        </div>
        
        <div class="job-desc">
          负责公司核心产品的前端开发工作，与产品经理和后端工程师密切配合，构建高质量的用户界面和交互体验，要求精通Vue、React等主流框架。
        </div>
      </div>
      
      <div class="job-actions">
        <button class="btn btn-outline-primary action-btn">
          <i class="fa fa-heart-o"></i> 收藏
        </button>
        <button class="btn btn-primary action-btn">
          立即申请
        </button>
      </div>
    </div>
    
    <!-- 2. 单图片招聘 -->
    <div class="job-item">
      <div class="job-header">
        <div class="no-logo">
          <i class="fa fa-building"></i>
        </div>
        <div class="job-info">
          <div class="job-title">餐厅服务员/店员（包吃住）</div>
          <div class="company-name">阳光餐饮管理有限公司</div>
          <div class="job-tags">
            <span class="job-tag salary">5k-7k</span>
            <span class="job-tag">全职</span>
            <span class="job-tag">经验不限</span>
            <span class="job-tag">学历不限</span>
          </div>
        </div>
      </div>
      
      <!-- 单图片 -->
      <div class="images-container">
        <div class="single-image">
          <img src="https://picsum.photos/800/400?random=10" alt="餐厅环境">
        </div>
      </div>
      
      <div class="job-details">
        <div class="job-meta">
          <div class="meta-item"><i class="fa fa-map-marker"></i> 北京市海淀区</div>
          <div class="meta-item"><i class="fa fa-cutlery"></i> 餐饮/服务业</div>
          <div class="meta-item"><i class="fa fa-clock-o"></i> 发布于 昨天</div>
        </div>
        
        <div class="job-desc">
          负责餐厅日常服务工作，包括接待顾客、点餐、上菜等，工作环境好，包吃住，有提成，有无经验均可，公司提供培训。
        </div>
      </div>
      
      <div class="job-actions">
        <button class="btn btn-outline-primary action-btn">
          <i class="fa fa-heart-o"></i> 收藏
        </button>
        <button class="btn btn-primary action-btn">
          立即申请
        </button>
      </div>
    </div>
    
    <!-- 3. 多图片招聘 -->
    <div class="job-item">
      <div class="job-header">
        <img src="https://picsum.photos/200/200?random=2" class="company-logo" alt="公司logo">
        <div class="job-info">
          <div class="job-title">室内设计师助理（可实习）</div>
          <div class="company-name">创意空间设计工作室</div>
          <div class="job-tags">
            <span class="job-tag salary">8k-12k</span>
            <span class="job-tag">全职</span>
            <span class="job-tag">1-3年</span>
            <span class="job-tag">大专</span>
          </div>
        </div>
      </div>
      
      <!-- 多图片 -->
      <div class="images-container">
        <div class="multiple-images">
          <div class="multi-image-item">
            <img src="https://picsum.photos/300/300?random=20" alt="工作环境1">
          </div>
          <div class="multi-image-item">
            <img src="https://picsum.photos/300/300?random=21" alt="工作环境2">
          </div>
          <div class="multi-image-item">
            <img src="https://picsum.photos/300/300?random=22" alt="工作成果1">
          </div>
        </div>
      </div>
      
      <div class="job-details">
        <div class="job-meta">
          <div class="meta-item"><i class="fa fa-map-marker"></i> 北京市东城区</div>
          <div class="meta-item"><i class="fa fa-paint-brush"></i> 设计/创意</div>
          <div class="meta-item"><i class="fa fa-clock-o"></i> 发布于 3天前</div>
        </div>
        
        <div class="job-desc">
          协助设计师完成室内设计项目，包括方案设计、施工图绘制、材料选购等工作，要求熟悉CAD、3DMAX等设计软件，有相关经验者优先。
        </div>
      </div>
      
      <div class="job-actions">
        <button class="btn btn-secondary action-btn">
          <i class="fa fa-heart"></i> 已收藏
        </button>
        <button class="btn btn-primary action-btn">
          立即申请
        </button>
      </div>
    </div>
    
    <!-- 4. 多图(4张)招聘 -->
    <div class="job-item">
      <div class="job-header">
        <img src="https://picsum.photos/200/200?random=3" class="company-logo" alt="公司logo">
        <div class="job-info">
          <div class="job-title">宠物医生/兽医助理</div>
          <div class="company-name">爱宠之家宠物医院</div>
          <div class="job-tags">
            <span class="job-tag salary">10k-15k</span>
            <span class="job-tag">全职</span>
            <span class="job-tag">经验不限</span>
            <span class="job-tag">本科</span>
          </div>
        </div>
      </div>
      
      <!-- 4张图片 -->
      <div class="images-container">
        <div class="multiple-images">
          <div class="multi-image-item">
            <img src="https://picsum.photos/300/300?random=30" alt="医院环境1">
          </div>
          <div class="multi-image-item">
            <img src="https://picsum.photos/300/300?random=31" alt="医院环境2">
          </div>
          <div class="multi-image-item">
            <img src="https://picsum.photos/300/300?random=32" alt="医疗设备1">
          </div>
          <div class="multi-image-item">
            <img src="https://picsum.photos/300/300?random=33" alt="医疗设备2">
            <div class="image-count">4</div>
          </div>
        </div>
      </div>
      
      <div class="job-details">
        <div class="job-meta">
          <div class="meta-item"><i class="fa fa-map-marker"></i> 北京市西城区</div>
          <div class="meta-item"><i class="fa fa-medkit"></i> 医疗/护理</div>
          <div class="meta-item"><i class="fa fa-clock-o"></i> 发布于 1周前</div>
        </div>
        
        <div class="job-desc">
          负责宠物疾病诊断与治疗，提供宠物健康咨询服务，要求具备兽医资格证，有责任心和爱心，良好的沟通能力。
        </div>
      </div>
      
      <div class="job-actions">
        <button class="btn btn-outline-primary action-btn">
          <i class="fa fa-heart-o"></i> 收藏
        </button>
        <button class="btn btn-primary action-btn">
          立即申请
        </button>
      </div>
    </div>
  </div>
  
  <!-- 底部导航 -->
  <div class="bottom-nav">
    <a href="#" class="nav-item">
      <i class="fa fa-home nav-icon"></i>
      <span>首页</span>
    </a>
    <a href="#" class="nav-item active">
      <i class="fa fa-briefcase nav-icon"></i>
      <span>招聘</span>
    </a>
    <a href="#" class="nav-item">
      <i class="fa fa-user-o nav-icon"></i>
      <span>我的</span>
    </a>
  </div>
  
  <!-- 职位类型筛选面板 -->
  <div class="filter-panel" id="job-type">
    <div class="panel-content">
      <div class="panel-header">
        <h3 class="panel-title">职位类型</h3>
        <button class="panel-close"><i class="fa fa-times"></i></button>
      </div>
      <div class="filter-options">
        <div class="option-group">
          <div class="option-items">
            <div class="option-item">全职</div>
            <div class="option-item">兼职</div>
            <div class="option-item">实习</div>
            <div class="option-item">远程</div>
            <div class="option-item">全职/实习</div>
          </div>
        </div>
      </div>
      <div class="panel-actions">
        <button class="btn btn-outline-secondary panel-action-btn">重置</button>
        <button class="btn btn-primary panel-action-btn">确定</button>
      </div>
    </div>
  </div>
  
  <!-- 薪资筛选面板 -->
  <div class="filter-panel" id="salary">
    <div class="panel-content">
      <div class="panel-header">
        <h3 class="panel-title">薪资范围</h3>
        <button class="panel-close"><i class="fa fa-times"></i></button>
      </div>
      <div class="filter-options">
        <div class="option-group">
          <div class="option-items">
            <div class="option-item">3k以下</div>
            <div class="option-item">3k-5k</div>
            <div class="option-item">5k-8k</div>
            <div class="option-item">8k-10k</div>
            <div class="option-item">10k-15k</div>
            <div class="option-item">15k-20k</div>
            <div class="option-item">20k-30k</div>
            <div class="option-item">30k以上</div>
          </div>
        </div>
      </div>
      <div class="panel-actions">
        <button class="btn btn-outline-secondary panel-action-btn">重置</button>
        <button class="btn btn-primary panel-action-btn">确定</button>
      </div>
    </div>
  </div>
  
  <!-- 经验筛选面板 -->
  <div class="filter-panel" id="experience">
    <div class="panel-content">
      <div class="panel-header">
        <h3 class="panel-title">工作经验</h3>
        <button class="panel-close"><i class="fa fa-times"></i></button>
      </div>
      <div class="filter-options">
        <div class="option-group">
          <div class="option-items">
            <div class="option-item">经验不限</div>
            <div class="option-item">应届毕业生</div>
            <div class="option-item">1年以内</div>
            <div class="option-item">1-3年</div>
            <div class="option-item">3-5年</div>
            <div class="option-item">5-10年</div>
            <div class="option-item">10年以上</div>
          </div>
        </div>
      </div>
      <div class="panel-actions">
        <button class="btn btn-outline-secondary panel-action-btn">重置</button>
        <button class="btn btn-primary panel-action-btn">确定</button>
      </div>
    </div>
  </div>
  
  <!-- 学历筛选面板 -->
  <div class="filter-panel" id="education">
    <div class="panel-content">
      <div class="panel-header">
        <h3 class="panel-title">学历要求</h3>
        <button class="panel-close"><i class="fa fa-times"></i></button>
      </div>
      <div class="filter-options">
        <div class="option-group">
          <div class="option-items">
            <div class="option-item">学历不限</div>
            <div class="option-item">高中及以下</div>
            <div class="option-item">中专/技校</div>
            <div class="option-item">大专</div>
            <div class="option-item">本科</div>
            <div class="option-item">硕士</div>
            <div class="option-item">博士</div>
          </div>
        </div>
      </div>
      <div class="panel-actions">
        <button class="btn btn-outline-secondary panel-action-btn">重置</button>
        <button class="btn btn-primary panel-action-btn">确定</button>
      </div>
    </div>
  </div>
  
  <!-- 地区筛选面板 -->
  <div class="filter-panel" id="location">
    <div class="panel-content">
      <div class="panel-header">
        <h3 class="panel-title">工作地区</h3>
        <button class="panel-close"><i class="fa fa-times"></i></button>
      </div>
      <div class="filter-options">
        <div class="option-group">
          <div class="option-group-title">热门城市</div>
          <div class="option-items">
            <div class="option-item">北京</div>
            <div class="option-item">上海</div>
            <div class="option-item">广州</div>
            <div class="option-item">深圳</div>
            <div class="option-item">杭州</div>
            <div class="option-item">成都</div>
          </div>
        </div>
        <div class="option-group">
          <div class="option-group-title">北京区域</div>
          <div class="option-items">
            <div class="option-item">朝阳区</div>
            <div class="option-item">海淀区</div>
            <div class="option-item">东城区</div>
            <div class="option-item">西城区</div>
            <div class="option-item">丰台区</div>
            <div class="option-item">通州区</div>
          </div>
        </div>
      </div>
      <div class="panel-actions">
        <button class="btn btn-outline-secondary panel-action-btn">重置</button>
        <button class="btn btn-primary panel-action-btn">确定</button>
      </div>
    </div>
  </div>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 筛选标签切换
    document.querySelectorAll('.filter-item').forEach(item => {
      item.addEventListener('click', function() {
        // 排除"全部"选项，它不需要激活状态
        if (!this.textContent.includes('全部')) {
          document.querySelectorAll('.filter-item').forEach(i => {
            i.classList.remove('active');
          });
          this.classList.add('active');
        }
      });
    });
    
    // 筛选面板控制
    const filterButtons = document.querySelectorAll('.filter-item[data-panel]');
    const filterPanels = document.querySelectorAll('.filter-panel');
    const panelCloseButtons = document.querySelectorAll('.panel-close');
    const panelCancelButtons = document.querySelectorAll('.panel-action-btn.btn-outline-secondary');
    
    // 打开筛选面板
    filterButtons.forEach(button => {
      button.addEventListener('click', function() {
        const panelId = this.getAttribute('data-panel');
        document.getElementById(panelId).classList.add('active');
      });
    });
    
    // 关闭筛选面板
    function closePanels() {
      filterPanels.forEach(panel => {
        panel.classList.remove('active');
      });
    }
    
    panelCloseButtons.forEach(button => {
      button.addEventListener('click', closePanels);
    });
    
    panelCancelButtons.forEach(button => {
      button.addEventListener('click', closePanels);
    });
    
    // 点击面板外部关闭
    filterPanels.forEach(panel => {
      panel.addEventListener('click', function(e) {
        if (e.target === this) {
          closePanels();
        }
      });
    });
    
    // 筛选选项选择
    const optionItems = document.querySelectorAll('.option-item');
    optionItems.forEach(item => {
      item.addEventListener('click', function() {
        // 检查是否是单选组
        const optionGroup = this.closest('.option-group');
        
        // 职位类型、薪资等是单选
        if (!optionGroup.classList.contains('multi-select')) {
          optionGroup.querySelectorAll('.option-item').forEach(i => {
            i.classList.remove('active');
          });
        }
        
        // 切换当前选项状态
        this.classList.add('active');
      });
    });
    
    // 确认筛选
    const confirmButtons = document.querySelectorAll('.panel-action-btn.btn-primary');
    confirmButtons.forEach(button => {
      button.addEventListener('click', function() {
        // 获取当前面板
        const panel = this.closest('.filter-panel');
        const panelId = panel.id;
        
        // 获取选中的选项
        const selectedOptions = panel.querySelectorAll('.option-item.active');
        const selectedValues = Array.from(selectedOptions).map(item => item.textContent);
        
        // 在实际应用中，这里会根据选中的选项筛选列表数据
        
        // 关闭面板
        closePanels();
      });
    });
    
    // 收藏按钮功能
    document.querySelectorAll('.job-actions .btn-outline-primary, .job-actions .btn-secondary').forEach(btn => {
      btn.addEventListener('click', function() {
        const icon = this.querySelector('i');
        
        if (icon.classList.contains('fa-heart-o')) {
          // 变为已收藏状态
          icon.classList.remove('fa-heart-o');
          icon.classList.add('fa-heart');
          this.classList.remove('btn-outline-primary');
          this.classList.add('btn-secondary');
        } else {
          // 变为未收藏状态
          icon.classList.remove('fa-heart');
          icon.classList.add('fa-heart-o');
          this.classList.remove('btn-secondary');
          this.classList.add('btn-outline-primary');
        }
      });
    });
    
    // 移除筛选标签
    document.querySelectorAll('.tag-remove').forEach(removeBtn => {
      removeBtn.addEventListener('click', function() {
        this.closest('.filter-tag').remove();
      });
    });
    
    // 清除全部筛选
    document.querySelector('.selected-filters .btn').addEventListener('click', function() {
      document.querySelectorAll('.filter-tag').forEach(tag => {
        tag.remove();
      });
      
      // 重置所有筛选状态
      document.querySelectorAll('.filter-item').forEach(item => {
        item.classList.remove('active');
      });
      document.querySelector('.filter-item').classList.add('active');
      
      optionItems.forEach(item => {
        item.classList.remove('active');
      });
    });
  </script>
</body>
</html>
